<template>
	<div class="main">
		<u-row class="v-head" v-for="item in likesInfo" :key="item.id">
			<u-col span="2">
				<u-avatar :src="item.avatar" mode="circle"></u-avatar>
			</u-col>
			<u-col span="6">
				<u-row>
					<u-col class="nickname">{{item.nickname}}</u-col>
				</u-row>
				<u-row>
					<u-col class="infos">{{item.age}}岁 {{item.address}} {{item.occupation}}</u-col>
				</u-row>
			</u-col>
			<u-col span="4">
				<button class="btn1" v-if="item.isFollow" @click="toMessageDetail(item.id)">聊天</button>
				<button class="btn1" v-else @click="follow(item)">关注</button>
			</u-col>
		</u-row>
	</div>
	
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const likesInfo = reactive([{
			id: 1,
			nickname: '蔡徐坤',
			avatar: 'https://img0.baidu.com/it/u=1707241419,378167178&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300',
			age: 26,
			address: '四川',
			occupation: '律师',
			isFollow: false,
		},
		{
			id: 2,
			nickname: '芋泥啵啵',
			avatar: 'https://pic.imeitou.com/uploads/allimg/2020010410/spzq4cwwnj1.jpeg',
			age: 26,
			address: '四川',
			occupation: '画家',
			isFollow: true,
		}
	])
	//点击“聊天”跳转
	const toMessageDetail = (id)=>{
		uni.navigateTo({
			url:`/pages/messageDetail/messageDetail?id=${id}`,
			 events: {
			    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			    acceptDataFromOpenedPage: function(data) {
			      // console.log(data)
			    },
			    someEvent: function(data) {
			      // console.log(data)
			    }
			  },
			  success: function(res) {
			      // 通过eventChannel向被打开页面传送数据
			      res.eventChannel.emit('acceptDataFromOpenerPage', { id:id})
			    }
			 
		})
	}
	//点击关注
	const follow = (obj) =>{
		obj.isFollow = true
	}
</script>

<style lang="scss" scoped>
	.main{
		display: flex;
		flex-direction: column;
		.v-head {
			height: 100rpx;
			line-height: 50rpx;
			margin: 20rpx 0;
			.btn1 {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				border-radius: 60rpx;
				color: hotpink;
				background-color: #efd2d4;
			}
		
			.nickname {
				font-size: 36rpx;
			}
		
			.infos {
				font-size: 24rpx;
				color: darkgray;
			}
		}
	}
	
</style>